import { Button, Space } from 'antd';
import { useState, useEffect, useRef } from 'react'
import './index.less';
import { Overlay } from 'ol';
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
export default function LeftFlow(props) {
    const { item } = props;


    const [selectedKey, setSelectedKey] = useState();

    useEffect(() => {
        setSelectedKey(item?.key)
    }, [item])

    const items = [{
        label: '选择灾害',
        key: 'xzzh'
    }, {
        label: '时度风险',
        key: 'sdfx'
    }, {
        label: '影响分析',
        key: 'yxfx'
    }, {
        label: '指挥决策',
        key: 'zhjc'
    }, {
        label: '报告生成',
        key: 'bgsc'
    }]
    const map = useBusinessMap();
    const [qp, setqp] = useState();
    const [ttipJjx, setTtipJjx] = useState();
    const popupRef = useRef(null);
    useEffect(() => {
        if (map) {
            const handler = evt => {
                const popup = new Overlay({
                    element: popupRef.current,
                });
                map.addOverlay(popup);
                const features = map.getFeaturesAtPixel(evt.pixel);
                // console.log('features',features)
                const coordinate = features?.find(feature => feature.get('yhlb'))?.getGeometry()?.getCoordinates();
                const coordinate1 = features?.find(feature => feature.get('cztdl'))?.getGeometry()?.getCoordinates();
                const coordinate2 = features?.find(feature => feature.get('jzzydl'))?.getGeometry()?.getCoordinates();
                const coordinate3 = features?.find(feature => feature.get('cszhlx'))?.getGeometry()?.getCoordinates();
                // console.log('coordinate',coordinate)
                if (coordinate) {
                    popup.setPosition(coordinate);
                } else if (coordinate1) {
                    popup.setPosition(coordinate1);
                } else if (coordinate2) {
                    popup.setPosition(coordinate2);
                } else {
                    popup.setPosition(coordinate3);
                }
                const item = features?.find(feature => feature.get('yhlb'))?.getProperties();
                const item1 = features?.find(feature => feature.get('cztdl'))?.getProperties();
                const item2 = features?.find(feature => feature.get('jzzydl'))?.getProperties();
                const item3 = features?.find(feature => feature.get('cszhlx'))?.getProperties();
                const tooltip = item?.yhmc;
                // const ttip = item?.jcjjx;
                const tooltip1 = item1?.cztmc;
                const ttip1 = item1?.fhjd;
                const tooltip2 = item2?.jzzymc;
                const tooltip3 = item3?.cszhmc;

                // const ttip2 = item2?.fhjd;
                if (item) {
                    setqp(tooltip);
                    // setTtipJjx(ttip)
                } else if (tooltip1) {
                    setqp(tooltip1);
                    // setTtipJjx(ttip1)
                } else if (tooltip2) {
                    setqp(tooltip2);
                    // setTtipJjx(ttip2)
                } else {
                    setqp(tooltip3);
                }
                //console.log('item',item)


                let popover = bootstrap.Popover.getInstance(popupRef.current);
                if (popover) {
                    popover.dispose();
                }
                popover = new bootstrap.Popover(popupRef.current, {
                    animation: false,
                    container: popupRef.current,
                    content: null,
                    html: true,
                    placement: 'right'
                });
                popover.show();
            }
            map.on('pointermove', handler);
            return () => {
                map.un('pointermove', handler);
            }
        }
    }, [map])

    return <div className='zhpg-left-flow'>
        <Space.Compact direction='vertical'>
            {items.map((item, i) => {
                return <Button className={`flow-btn hover-btn ${item.key === selectedKey ? "selected" : ""}`} key={item.key} onClick={e => {
                    props.onChange?.(item)
                }}>
                    {item.label}
                    {i === items.length - 1 && <Button className='last-item hover-btn'></Button>}
                </Button>
            })}
        </Space.Compact>
        <div ref={popupRef} style={{
            display: 'inline-block',
            whiteSpace: 'nowrap',
            borderRadius: 10,/* 设置圆角半径 */
            backgroundColor: 'black', /* 设置背景色为黑色 */
            padding: 10, /* 可选：添加内边距以增加可读性 */
            color: 'white',/* 可选：设置文本颜色为白色 */
        }} >
            {qp}<br />{ttipJjx ? '警戒线:' + ttipJjx : " "}
        </div>
    </div>;
}